import React, {Component,createContext} from 'react';

import './index.css'

const MyContext=createContext()

//类式组件使用Provider，函数式组件使用Consumer
const {Provider,Consumer}=MyContext
class A extends Component {

    state={
        name:'Tom',
        age:18
    }

    render() {
        const {name,age}=this.state
        return (
            <div className='parent'>
                <h3>我是A组件</h3>
                <Provider value={{name,age}}>
                    <B/>
                </Provider>
            </div>
        );
    }
}


class B extends Component {
    // 声明接收context
    static contextType=MyContext
    render() {
        const{name,age}=this.context
        return (
            <div className='children'>
                <h3>我是B组件,我从A组件接收的数据是:{name}---{age}</h3>
              <C />
            </div>
        );
    }
}


class C extends Component {
    // 声明接收context
    static contextType=MyContext
    render() {
        const{name,age}=this.context
        return (
            <div className='grand'>
               <h3>我是C组件,我从A组件接收的数据是:{name}---{age}</h3>
                <D/>
            </div>
        );
    }
}



function D(props) {
    return (
        <div>

            <h3>我是D组件,我从A组件接收的数据是:
            <Consumer>
                {(value)=> `${value.name}---${value.age}`}
            </Consumer>
            </h3>
        </div>
    );
}



export default A;